<template>
  <view class="scene-box">
    <view
      v-for="(item, index) in sceneList"
      :key="index"
      class="scene-list"
      @click="linkProductListFn(item.id,item.sceneTitle)"
    >
      <image
        style="width: 100%;"
        :src="item.sceneImgUrl"
      />
      <view class="scence_text">{{ item.sceneTitle }}</view>
      <!--        <uni-list-item-->
      <!--          :border="false"-->
      <!--          :title="item.sceneTitle"-->
      <!--          link-->
      <!--        />-->
    </view>
  </view>
</template>

<script>

import { queryAppScene } from '../../api/yc_goods';

export default {
  data() {
    return {
      title: 'Index',
      pageParams: {
        // state: 'ERROR',
        emptyTitle: '信号可能跑到外星球了哦～',
        errorTitle: '请求失败',
        showButton: true
      },
      pageSize: 10,
      sceneList: [],
    }
  },
  mounted() {
    this.querySceneFn(1)
  },
  methods: {
    querySceneFn(pageNum) {
      const params = {
        pageNum: pageNum,
        pageSize: this.pageSize,
        sceneId: '',
        subSceneId: '',
        sceneTitle: '',
        parentId: '',
        startTime: '',
        endTime: '',
        status: 10
      }
      queryAppScene(params).then((res) => {
        this.$emit('setPageParamsFn', null)
        if (res.errorCode != 0) {
          this.$u.toast(res.msg)
          return
        }
        this.$nextTick(() => {
          if (res.data.result) {
            this.sceneList = this.sceneList.concat(res.data.result)
            if (res.data.result.length < this.pageSize) {
              this.$emit('resetLoadMoreFn', {
                isLoadMore: true,
                loadStatus: 'nomore'
              })
            } else {
              this.$emit('resetLoadMoreFn', {
                isLoadMore: false,
                loadStatus: 'more'
              })
            }
          } else {
            this.$emit('resetLoadMoreFn', {
              isLoadMore: true,
              loadStatus: 'nomore'
            })
          }
          this.$forceUpdate()
        })
      }).catch((err) => {
        this.$emit('setPageParamsFn', 'ERROR', err.message ? err.message : '服务异常')
        this.$emit('resetLoadMoreFn', {
          isLoadMore: true,
          loadStatus: 'nomore'
        })
      })
    },
    linkProductListFn(sceneId, sceneTitle) {
      uni.navigateTo({
        url: `/productList/productList/index?title=${sceneTitle}&sceneId=${sceneId}&pageType=scene`
      });
    },
  },
}
</script>

<style lang="scss" scoped>
.scene-box{
  padding: 0 32rpx;
  .scene-list{
    width: 686rpx;
    height: 240rpx;
    overflow: hidden;;
    border-radius: 8rpx;
    position: relative;
    margin-bottom: 16rpx;
    .scence_text{
      position: absolute;
      bottom:0;
      left: 0;
      width:638rpx;
      background: rgba(0,0,0,0.5) url("../../static/image/ico_next02.png") no-repeat 630rpx 20rpx/32rpx 32rpx;
      height: 72rpx;
      line-height: 72rpx;
      color: #fff;
      padding: 0 24rpx;
    }
  }
}
</style>
